.page-container {
  min-height: 100vh;
  background-color: #f6f7fb;
  display: flex;
  flex-direction: column;
  position: relative;
  padding-bottom: 140rpx;
}

.status-bar {
  background: linear-gradient(180deg, #e54d42 0%, #ff8a73 100%);
}

.header {
  padding: 32rpx 36rpx 120rpx;
  background: linear-gradient(180deg, #e54d42 0%, #ff8a73 100%);
  border-bottom-left-radius: 48rpx;
  border-bottom-right-radius: 48rpx;
  position: relative;
  z-index: 1;

  .nav-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 40rpx;

    .right {
      display: flex;
      align-items: center;
      gap: 24rpx;
    }
  }

  .profile-card {
    background-color: #fff;
    border-radius: 32rpx;
    padding: 32rpx 28rpx;
    display: flex;
    align-items: center;
    gap: 24rpx;
    box-shadow: 0 24rpx 48rpx rgba(229, 77, 66, 0.16);

    .avatar {
      width: 120rpx;
      height: 120rpx;
      border-radius: 50%;
      background: linear-gradient(135deg, #e54d42 0%, #ff8a73 100%);
      display: flex;
      align-items: center;
      justify-content: center;

      .avatar-text {
        color: #fff;
        font-size: 48rpx;
        font-weight: 600;
      }
    }

    .profile-info {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 16rpx;

      .user-row {
        display: flex;
        align-items: center;
        gap: 16rpx;

        .user-name {
          font-size: 36rpx;
          font-weight: 600;
          color: #1f1f24;
        }
      }

      .badges {
        display: flex;
        align-items: center;
        gap: 24rpx;
        font-size: 24rpx;
        color: #666;

        .badge {
          display: flex;
          align-items: center;
          gap: 8rpx;
        }
      }
    }

    .link {
      display: flex;
      align-items: center;
      gap: 8rpx;
      font-size: 24rpx;
      color: #999;
    }
  }

  .portfolio-panel {
    margin-top: 32rpx;
    background: rgba(255, 255, 255, 0.18);
    border-radius: 28rpx;
    padding: 28rpx 36rpx;
    display: flex;
    justify-content: space-between;
    gap: 24rpx;
    color: #fff;

    .asset-item {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 12rpx;
      min-width: 0;

      .label {
        font-size: 24rpx;
        opacity: 0.9;
      }

      .value {
        font-size: 36rpx;
        font-weight: 600;

        &.positive {
          color: #ffd666;
        }
      }
    }
  }
}

.content {
  flex: 1;
  margin-top: -80rpx;
  padding: 0 32rpx 32rpx;
  box-sizing: border-box;
  z-index: 2;

  .vip-banner {
    background: linear-gradient(135deg, #ffe5e1 0%, #ffd1c9 100%);
    border-radius: 32rpx;
    padding: 32rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24rpx;
    margin-bottom: 32rpx;

    .banner-left {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 12rpx;

      .title {
        font-size: 36rpx;
        font-weight: 600;
        color: #e54d42;
      }

      .desc {
        font-size: 26rpx;
        color: #a35b52;
        line-height: 1.5;
      }
    }
  }

  .section {
    margin-bottom: 32rpx;

    .section-title {
      font-size: 32rpx;
      font-weight: 600;
      color: #1f1f24;
      margin-bottom: 24rpx;
    }

    .section-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 24rpx;

      .section-title {
        margin-bottom: 0;
      }

      .section-link {
        font-size: 26rpx;
        color: #e54d42;
      }
    }
  }

  .quick-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24rpx;

    .quick-item {
      background-color: #fff;
      border-radius: 24rpx;
      padding: 24rpx 12rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12rpx;
      text-align: center;
      box-shadow: 0 16rpx 32rpx rgba(31, 31, 36, 0.04);

      .icon {
        width: 72rpx;
        height: 72rpx;
        border-radius: 20rpx;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .label {
        font-size: 28rpx;
        font-weight: 600;
        color: #1f1f24;
      }

      .desc {
        font-size: 22rpx;
        color: #888;
      }

      .bg-orange {
        background: linear-gradient(135deg, #ff8a73 0%, #ffaf91 100%);
      }

      .bg-green {
        background: linear-gradient(135deg, #34c38f 0%, #6fe0b4 100%);
      }

      .bg-blue {
        background: linear-gradient(135deg, #5c7cfa 0%, #88a3ff 100%);
      }

      .bg-purple {
        background: linear-gradient(135deg, #b37feb 0%, #d3aef9 100%);
      }
    }
  }

  .creator-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24rpx;
    margin-bottom: 24rpx;

    .creator-item {
      background-color: #fff;
      border-radius: 24rpx;
      padding: 28rpx 12rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12rpx;
      box-shadow: 0 16rpx 32rpx rgba(31, 31, 36, 0.04);

      .icon {
        width: 88rpx;
        height: 88rpx;
        border-radius: 24rpx;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .label {
        font-size: 26rpx;
        color: #333;
      }
    }
  }

  .topic-card {
    background-color: #fff;
    border-radius: 24rpx;
    padding: 28rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24rpx;
    box-shadow: 0 16rpx 32rpx rgba(31, 31, 36, 0.04);

    .tag {
      font-size: 24rpx;
      color: #e54d42;
      background: rgba(229, 77, 66, 0.1);
      border-radius: 24rpx;
      padding: 8rpx 20rpx;
    }

    .topic {
      flex: 1;
      font-size: 28rpx;
      color: #1f1f24;
      font-weight: 600;
    }

    .topic-link {
      display: flex;
      align-items: center;
      gap: 8rpx;
      font-size: 24rpx;
      color: #e54d42;
    }
  }

  .common-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24rpx;

    .common-item {
      background-color: #fff;
      border-radius: 24rpx;
      padding: 24rpx 12rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 16rpx;
      box-shadow: 0 16rpx 32rpx rgba(31, 31, 36, 0.04);

      .icon {
        width: 88rpx;
        height: 88rpx;
        border-radius: 24rpx;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .label {
        font-size: 26rpx;
        color: #333;
      }
    }
  }
}
